<template>
  <div>
    <router-view></router-view>
    我是校友礼品(文创)
  </div>

  
<div>
    <div v-if="!editMode" class="content-display">
       <p>你输入的内容是：</p>  
      <pre>{{ inputContent }}</pre> 
      <button @click="editContent" class="bianji">编辑</button>
    </div>
    <div v-else>
      <textarea
        v-model="inputContent"
        placeholder="请输入内容..."
        cols="50"
        rows="20"
        class="wenben"
      ></textarea>
      <button @click="saveContent" class="anniu">保存</button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { upserve, getserve } from '@/api/user'

onMounted(async () => {
  const res = await getserve(8)
  inputContent.value = res.data.content
  console.log(res);
})
// 定义一个响应式变量来存储textarea的内容
const inputContent = ref('')
// 定义一个响应式变量来控制是否处于编辑模式  
const editMode = ref(false)

// 保存内容的函数
const saveContent = async () => {
  // 当内容不为空时，设置 hasSaved 为 true 以显示内容
  if (inputContent.value.trim() !== '') {
       editMode.value = false; 
       await upserve({id:8,content:inputContent.value})
  } else {
    // 可选：如果内容为空，给出提示
    alert('请输入一些内容！');
  }
}
// 编辑内容的函数，进入编辑模式  
const editContent = () => {  
  editMode.value = true;  
} 

</script>  


<style scoped>
.content-display pre{
  margin-left: 2em;
}
.bianji{
  margin-left: 10px;
}

.wenben {
  display: block;
  resize: none;
  /* margin-left: 2em; */
}
.anniu {
  margin-top: 10px;
  margin-right: 20px;
}
</style>
